<template>
  <div class="main-container">
    <div id="screens" ref="screensRef" @wheel="handleWheel" @scroll="handleScroll">
      <div ref="containerRef" class="screen-container">
        <button class="my-test" @click="onclick">ok</button>
        <div id="canvas" :class="{ blinkColor: isActive }">hello</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">

import { defineComponent, ref, onMounted, onUnmounted, reactive, computed, nextTick } from 'vue';
import BaseComponent from 'components/views/BaseComponent.vue';
import VueRulerTool from 'vue3-sketch-ruler'


export default defineComponent({
  name: 'IndexPage',
  extends: BaseComponent,
  components: {
    VueRulerTool
  },
  setup () {
    let isActive = ref(true);
    const onclick = () => {
      isActive.value = !isActive.value;
    };

    //加载组件
    onMounted(() => {

    });

    //卸载组件
    onUnmounted(() => {

    });

    return {
      isActive,
      onclick
    };
  }
});
</script>

<style lang="scss" scoped>
.main-container {
  position: relative;
  top: 5px;
  left: 5px;
  width: 100%;
  height: 600px;
  background-color: #f5f5f5;
  border: 1px solid #dadadc;

  #screens {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .screen-container {
    position: absolute;
    width: 5000px;
    height: 3000px;
  }
  .scale-value {
    position: absolute;
    bottom: 100%;
    left: 0;
  }

  .button {
    position: absolute;
    bottom: 100%;
    left: 100px;
  }

  #canvas {
    position: absolute;
    top: 80px;
    left: 50px;
    width: 160px;
    height: 200px;
    background: #f1ba11;
    transform-origin: 50% 0;
  }

  .my-test {
    visibility: visible;
  }
  .blinkColor {
    animation: shrink 5s infinite;
  }
  @keyframes shrink {
    0% {
      background: yellow;
      transform: scale(0.5);
      opacity: 1;
    }

    30% {
      background: greenyellow;
      opacity: 1;
    }

    100% {
      background: deeppink;
      transform: scale(1.4);
      opacity: 0;
    }
  }
}


</style>
